<template>
  <el-drawer v-model="dialogVisible" size="40%">
    <!-- 标题 -->
    <template #header>
      <div class="dialog-title">
        <SvgIcon :icon="dialogIconMap[dialogMode]"/>
        <span>{{ dialogModeMap[dialogMode] + ' - ' + dialogTitle }}</span>
      </div>
    </template>

    <!-- 内容信息 -->
    <el-descriptions :column="2" title="用户信息">
      <el-descriptions-item :width="descriptionsItemWidth" label="UID：">
        <span>{{ formData.uid }}</span>
      </el-descriptions-item>
      <el-descriptions-item :width="descriptionsItemWidth" label="编号：">
        <span>{{ formData.user_id }}</span>
      </el-descriptions-item>

      <el-descriptions-item :width="descriptionsItemWidth" label="用户账号：">
        <span>{{ formData.account }}</span>
      </el-descriptions-item>
      <el-descriptions-item :width="descriptionsItemWidth" label="邀请码：">
        <span>{{ formData.invite_code }}</span>
      </el-descriptions-item>

      <el-descriptions-item :width="descriptionsItemWidth" label="邀请人账号：">
        <span>{{ formData.parent_account || '-' }}</span>
      </el-descriptions-item>

      <el-descriptions-item :width="descriptionsItemWidth" label="">

      </el-descriptions-item>
    </el-descriptions>

    <el-divider border-style="dashed"/>

    <el-descriptions :column="2" title="团队数据">
      <el-descriptions-item :width="descriptionsItemWidth" label="直推人数：">
        <span>{{ formData.directly_count }}</span>
      </el-descriptions-item>

      <el-descriptions-item :width="descriptionsItemWidth" label="团队人数：">
        <span>{{ formData.team_count }}</span>
      </el-descriptions-item>

      <el-descriptions-item :width="descriptionsItemWidth" label="直推实名：">
        <span>{{ formData.directly_certify_count }}</span>
      </el-descriptions-item>

      <el-descriptions-item :width="descriptionsItemWidth" label="团队实名：">
        <span>{{ formData.team_certify_count }}</span>
      </el-descriptions-item>

      <el-descriptions-item :width="descriptionsItemWidth" label="直推有效：">
        <span>{{ formData.directly_valid_count }}</span>
      </el-descriptions-item>

      <el-descriptions-item :width="descriptionsItemWidth" label="团队有效：">
        <span>{{ formData.team_valid_count }}</span>
      </el-descriptions-item>
    </el-descriptions>

    <!-- 底部操作区域 -->
    <template #footer>
      <span class="dialog-footer">
        <el-button :loading="dataLoading" @click="dialogVisible = false">关 闭</el-button>
      </span>
    </template>
  </el-drawer>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue';
import { FormInstance } from 'element-plus';
import { SvgIcon } from '@/components/icon';
import useDialog from '@/hooks/use-dialog.ts';
import { userPyramidInfo } from '@/api/api-user.ts';

defineOptions({name: 'user-pyramid-info'})

const formRef = ref<FormInstance>();
const formLoading = ref(false);// 表单是否加载中
const {dialogVisible, dialogTitle, dialogMode, dialogModeMap, dialogIconMap} = useDialog(false);
const descriptionsItemWidth = ref('110px');

// 默认表单数据
let defaultForm = {
  uid: undefined,
  user_id: undefined,
  account: undefined,
  nickname: undefined,
  avatar_url: undefined,
  invite_code: undefined,
  special_flag: 0,
  account_flag: 0,
  parent_id: undefined,
  parent_account: undefined,
  tier_level: undefined,
  team_count: 0,
  directly_count: 0,
  team_certify_count: 0,
  directly_certify_count: 0,
  team_valid_count: 0,
  directly_valid_count: 0,
  team_performance: 0.00,
  integral: 0.00,
  balance: 0.00,
  subsidy_xs: 0.00,
  subsidy_xx: 0.00,
  bonus_zj: 0.00,
  bonus_hhr: 0.00,
  consume_total: 0.00,
  create_time: undefined,
};

// 表单数据
const formData = ref({...defaultForm});

/** 判断数据是否处于加载中 */
const dataLoading = computed(() => {
  return formLoading.value;
})

/** 打开弹窗 */
const open = async (id: number) => {
  dialogMode.value = 0;
  dialogTitle.value = '团队信息';
  dialogVisible.value = true;
  // 重置表单
  handleFormReset();

  // 加载数据
  formLoading.value = true
  try {
    // 加载用户数据
    const {data} = await userPyramidInfo(id)
    formData.value = data;
  } finally {
    formLoading.value = false
  }
}
// 提供 open 方法，用于打开弹窗
defineExpose({open})

/** 重置表单 */
const handleFormReset = () => {
  // 重置表单数据
  formData.value = {...defaultForm};
  // 重置界面表单数据
  formRef.value?.resetFields();
};
</script>

<style lang="scss" scoped>
:deep(.el-descriptions__label) {
  margin-right: 0;
  display: inline-block;
  min-width: 80px;
  vertical-align: top;
  text-align: right;
}

:deep(.el-descriptions__title) {
  border-left: 3px solid var(--el-color-primary);
  padding-left: 10px;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
}
</style>
